<template>
	<view class="index">
		<together-header class="together-header" />
		<heart-beat class="heartbeat" />
		<uni-fab ref="fab" :pattern="patten" :content="content" horizontal="right" vertical="bottom"
			direction="vertical" @trigger="trigger" @fabClick="fabClick"  />
	</view>
</template>

<script>
	import {
		ref,
		reactive
	} from "vue";
	import HeartBeat from "./components/HeartBeat";
	import TogetherHeader from "./components/TogetherHeader";

	export default {
		components: {
			HeartBeat,
			TogetherHeader
		},
		setup() {
			const fab = ref()
			const patten = reactive({
				color: '#7A7E83',
				backgroundColor: '#fff',
				selectedColor: '#fc3f3f',
				buttonColor: 'rgba(222, 70, 89, 1)',
				iconColor: '#fff'
			}, )
			const content = reactive([{
				iconPath: '/static/floating_button/commenmoration_day.png',
				selectedIconPath: '/static/floating_button/commenmoration_day.png',
				text: '纪念日'
			}, {
				iconPath: '/static/floating_button/private_diary.png',
				selectedIconPath: '/static/floating_button/private_diary.png',
				text: '私密日记'
			}, {
				iconPath: '/static/floating_button/aunt.png',
				selectedIconPath: '/static/floating_button/aunt.png',
				text: '姨妈助手'
			}])

			const trigger = (e) => {
				// 关闭悬浮按钮
				fab.value.close()
				switch (e.index) {
					case 0:
						uni.navigateTo({
							url: '/pages/commenmoration_day/index'
						})
						break
					default:
						uni.showToast({
							icon: "error",
							title: '暂未开放'
						})
						break
				}
			}
			const fabClick = (e) => {

			}

			return {
				fab,
				patten,
				content,
				trigger,
				fabClick
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		height: 100vh;
		background-image: url("https://coder-love.oss-cn-shanghai.aliyuncs.com/default_background%402x.png");
		background-size: 100% 100%;
	}

	.together-header {
		left: 0;
		position: fixed;
		top: 256rpx;
		height: 100rpx;
	}

	.heartbeat {
		position: fixed;
		transition: all 1s ease-in-out;
		height: 300rpx;
		width: 300rpx;
		bottom: 450rpx;
		right: 225rpx;
		z-index: 999;
	}

	.index :deep(.uni-fab) {
		box-shadow: none;
	}
</style>
